<template>
    <div style="width: auto;height: 470px" id="echarts1">
    </div>
</template>

<script>
import * as echarts from 'echarts'

import { getLeaveData } from "@/api/front/statistics";

const colors = ['#5470C6']

export default {
    name: 'echarts1',
    data() {
        return {
            // option配置
            option: {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {},
                grid: {
                    top: 70,
                    bottom: 50
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            // formatter: function (value) {
                            //     const date = new Date(value);
                            //     // 只有当日期为每个月的第一天时，才显示年份和月份
                            //     if (date.getDate() === 1) {
                            //         return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`;
                            //     }
                            //     // 对于非1号日期，返回空字符串使其不显示
                            //     return '';
                            // },
                            // rotate: 45, // 如果月份名称太多，可以旋转45度以避免重叠
                        },
                        data: [] // 初始为空，等待数据填充
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '请假人数(今年)',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [] // 初始为空，等待数据填充
                    }
                ]
            }
        }
    },
    methods: {
        generateXAxisData() {
            const currentYear = new Date().getFullYear(); // 获取当前年份
            const startDate = new Date(currentYear, 0, 1); // 当前年份的第一天
            const endDate = new Date(currentYear, 11, 31); // 当前年份的最后一天
            const dates = [];
            let currentDate = new Date(startDate);

            while (currentDate <= endDate) {
                // 直接生成 YYYY-MM-DD 格式的日期字符串
                const year = currentDate.getFullYear();
                const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以加1
                const day = currentDate.getDate().toString().padStart(2, '0');
                dates.push(`${year}-${month}-${day}`);
                currentDate.setDate(currentDate.getDate() + 1); // 移动到下一天
            }

            return dates;
        },
        getLeaveData(year) {
            getLeaveData(year).then(response => {
                console.log(response); // 打印数据以确认
                const data = response; // 假设 response 已经是正确的数据格式
                const dates = this.generateXAxisData(); // 不需要传入年份，因为我们总是获取当前年份的数据
                const leaveCounts = dates.map(date => {
                    const leaveRecord = data.find(item => item.date === date);
                    return leaveRecord ? leaveRecord.count : 0;
                });
                this.option.xAxis[0].data = dates; // X轴的数据是每一天的日期
                this.option.series[0].data = leaveCounts; // 系列数据是每一天的请假人数

                this.echartsInit();
            }).catch(error => {
                console.error('Error fetching leave data:', error);
            });
        },
        echartsInit() {
            const chart = echarts.init(document.getElementById('echarts1'));
            chart.setOption(this.option);
        }
    },
    mounted() {
        const thisYear = new Date().getFullYear();
        this.getLeaveData(thisYear);
    }
}
</script>

<style scoped></style>